<head>
    <style>
        .containers {
            display: flex;
            padding: 3px;
        }

        .container-ok {
            padding: 10px;
            display: flex;
            flex-wrap: wrap;
            flex-direction: column;
        }

        .container2 {
            display: flex;
        }

        .container1 {
            margin: 30px;
        }


        .title {
            width: 100px;
            color: #ffffff;
            text-align: center;
        }

        .Picon {
            background-image: url('test.png');
            background-repeat: no-repeat;
            background-size: contain;
        }

        .Picon-test {
            width: 10px;
            height: 10px;
            margin: 5px;
        }

        .Picon-ok {
            width: 100px;
            height: 100px;
        }

        .doc {
            /* 模糊 */
            filter: blur(3px);
            /* 亮度 */
            filter: brightness(0.5);
            /* 对比度 */
            filter: contrast(0.5);
            /* 灰度 */
            filter: grayscale(0.5);
            /* 褐色调 */
            filter: sepia(0.5);
            /* 色相旋转 */
            filter: hue-rotate(90deg);
            /* 饱和度 */
            filter: saturate(0.5);
            /* 反转颜色 */
            filter: invert(1);
        }
    </style>
    <script>
        window.onload = () => {
            test('#495057', { invert: true });
            // test('#216598', {
            //     step_rotate: 1,
            //     start_rotate: 299,
            //     end_rotate: 301,

            //     step_grayscale: 1,
            //     start_grayscale: 20,
            //     end_grayscale: 40,

            //     step_brightness: 1,
            //     start_brightness: 130,
            //     end_brightness: 170,
            // });
        };

        const test = (color, options) => {
            options = options || {};

            const step_rotate = options.step_rotate || 10;
            const start_rotate = options.start_rotate || 0;
            const end_rotate = options.end_rotate || 360;

            const step_grayscale = options.step_grayscale || 10;
            const start_grayscale = options.start_grayscale || 0;
            const end_grayscale = options.end_grayscale || 300;

            const step_brightness = options.step_brightness || 10;
            const start_brightness = options.start_brightness || 0;
            const end_brightness = options.end_brightness || 300;

            const invert = options.invert || false;

            const ele_container = document.createElement('div');
            ele_container.classList.add('container');
            document.body.appendChild(ele_container);
            ele_container.style.backgroundColor = color;

            for (let rotate = start_rotate; rotate <= end_rotate; rotate += step_rotate) {
                const ele_container1 = document.createElement('div');
                ele_container1.classList.add('container1');
                ele_container.appendChild(ele_container1);

                for (let grayscale = start_grayscale; grayscale <= end_grayscale; grayscale += step_grayscale) {
                    const ele_container2 = document.createElement('div');
                    ele_container2.classList.add('container2');
                    ele_container1.appendChild(ele_container2);

                    for (let brightness = start_brightness; brightness <= end_brightness; brightness += step_brightness) {
                        const ele_icon = document.createElement('div');
                        ele_icon.classList.add('Picon');
                        ele_icon.classList.add('Picon-test');
                        ele_container2.appendChild(ele_icon);

                        const filter = `hue-rotate(${rotate}deg) grayscale(${grayscale / 100}) brightness(${brightness / 100})` + (invert ? 'invert(1)' : '');
                        ele_icon.style.setProperty('filter', filter);
                        ele_icon.addEventListener('click', () => { console.log(`filter: ${filter};`) });
                    }
                }
            }
        };
    </script>
</head>

<body style="background-color: gray; flex-wrap: wrap;">
    <div class="containers">
        <div class="container-ok">
            <div class="title">#216598</div>
            <div class="Picon Picon-ok" style="filter: hue-rotate(301deg) grayscale(0.37) brightness(1.51);"></div>
        </div>

        <div class="container-ok">
            <div class="title">#333333</div>
            <div class="Picon Picon-ok" style="filter: hue-rotate(180deg) grayscale(1.5) brightness(1.5);"></div>
        </div>

        <div class="container-ok">
            <div class="title">#505050</div>
            <div class="Picon Picon-ok" style="filter: hue-rotate(270deg) grayscale(1.4) brightness(2.7)invert(1);"></div>
        </div>

        <div class="container-ok">
            <div class="title">#dcdcdc</div>
            <div class="Picon Picon-ok" style="filter: hue-rotate(0deg) grayscale(1.4) brightness(1.9)invert(1);"></div>
        </div>

        <div class="container-ok">
            <div class="title">#0000ff</div>
            <div class="Picon Picon-ok"></div>
        </div>

        <div class="container-ok">
            <div class="title">#000000</div>
            <div class="Picon Picon-ok" style="filter: grayscale(1) brightness(0);"></div>
        </div>

        <div class="container-ok">
            <div class="title">#ffffff</div>
            <div class="Picon Picon-ok" style="filter: grayscale(1) brightness(0) invert(1);"></div>
        </div>

        <div class="container-ok">
            <div class="title">#ffff00</div>
            <div class="Picon Picon-ok" style="filter: invert(1);"></div>
        </div>

        <div class="container-ok">
            <div class="title">#ff0025</div>
            <div class="Picon Picon-ok" style="filter: hue-rotate(90deg);"></div>
        </div>

        <div class="container-ok">
            <div class="title">#ff0000</div>
            <div class="Picon Picon-ok" style="filter: hue-rotate(90deg) saturate(10);"></div>
        </div>

        <div class="container-ok">
            <div class="title">#005b00</div>
            <div class="Picon Picon-ok" style="filter: hue-rotate(270deg);"></div>
        </div>

        <div class="container-ok">
            <div class="title">#00ff00</div>
            <div class="Picon Picon-ok" style="filter: hue-rotate(270deg) saturate(10);"></div>
        </div>
    </div>
</body>
